import React, { useCallback, useState, useEffect, memo, useMemo, useDeferredValue } from 'react'

const List = memo(({ newNum }) => {
  const [data, setData] = useState([])

  useEffect(() => {
    const arr = new Array(5000)
    arr.fill(newNum, 0)
    setData(arr)
  }, [newNum])

  return (
    <ul>
      {
        data.map((item, index) => {
          return (
            <li key={'aaa' + index}>{item}</li>
          )
        })
      }
    </ul>
  )
})

export default function UseDeferredValueDemo() {
  const [num, setNum] = useState(0)

  const handleInput = useCallback((e) => {
    setNum(e.target.value)
  }, [])

  const newNum = useDeferredValue(num)

  const newList = useMemo(() => {
    return (
      <List newNum={newNum}></List>
    )
  }, [newNum])

  return (
    <>
      <input type="number" onInput={handleInput} />
      {newList}
    </>
  )
}
